import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/index",
    component: () => import("@/components/firstPage.vue"),
  },
  {
    path: "/index",
    component: () => import("@/components/firstPage.vue"),
    children: [
      {
        path: "user",
        component: () => import("@/components/user/userList.vue"),
      },
      {
        path: "menu-management",
        component: () => import("@/components/menu-management/index.vue"),
      },
      {
        path: "test",
        component: () => import("@/components/test/test-module/index.vue"),
      },
      {
        path: "test-props",
        component: () => import("@/components/test/test-props-emit/parent.vue"),
      },
      {
        path: "test-slot",
        component: () => import("@/components/test/test-slot/slot-parent.vue"),
      },
      {
        path: "test-watch-computed",
        component: () =>
          import("@/components/test/test-watch-computed/watch-computed.vue"),
      },
      {
        path: "test-vuex",
        component: () => import("@/components/test/test-vuex/index.vue"),
      },
      {
        path: "test-element-plus",
        component: () =>
          import("@/components/test/test-element-plus/index.vue"),
      },
      {
        path: "test-page-layout",
        component: () => import("@/components/test/test-page-layout/index.vue"),
      },
      {
        path: "test-grid-media-query",
        component: () =>
          import(
            "@/components/test/test-grid-media-query/grid-media-query.vue"
          ),
      },
      {
        path: "test-flex",
        component: () => import("@/components/test/test-flex/flex.vue"),
      },
      {
        path: "test-css",
        component: () => import("@/components/test/test-css/css.vue"),
      },
      {
        path: "test-js",
        component: () => import("@/components/test/test-js/index.vue"),
      },
      {
        path: "test-h5-drag",
        component: () => import("@/components/test/test-h5-drag/h5-drag.vue"),
      },
      {
        path: "test-echarts",
        component: () =>
          import("@/components/test/test-echarts/echarts-demo.vue"),
      },
    ],
  },
  {
    path: "/test/:id",
    component: () => import("@/components/test/test-first-page/index.vue"),
  },
  {
    path: "/login",
    component: () => import("@/components/login/login.vue"),
  },
  {
    path: "/register",
    component: () => import("@/components/login/register.vue"),
  },
  {
    path: "/change-pwd",
    component: () => import("@/components/login/change-pwd.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});
router.beforeEach((to, from, next) => {
  const loginRouterList = ["/login", "/register", "/change-pwd"];

  if (loginRouterList.includes(to.path)) {
    return next();
  }
  const tokenStr = localStorage.getItem("token");

  const fullPath = to.fullPath;
  const redirectPath =
    fullPath === "/"
      ? "/login"
      : `/login?redirect=${encodeURIComponent(fullPath)}`;

  if (!tokenStr) {
    return next(redirectPath);
  }
  const token = JSON.parse(tokenStr);
  if (token.token && token.expireDate < new Date()) {
    return next(redirectPath);
  }
  next();
});

export default router;
